<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实体变更日志测试V2</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid mt-4">
        <h2>实体变更日志测试V2</h2>
        
        <div class="card mb-4">
            <div class="card-header">
                <h5>实体变更日志查询</h5>
            </div>
            <div class="card-body">
                <form id="queryForm">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="entityClass">实体类名</label>
                                <input type="text" class="form-control" id="entityClass" name="entityClass" placeholder="输入实体类名">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="operationType">操作类型</label>
                                <select class="form-control" id="operationType" name="operationType">
                                    <option value="">全部</option>
                                    <option value="INSERT">新增</option>
                                    <option value="UPDATE">修改</option>
                                    <option value="DELETE">删除</option>
                                    <option value="SELECT">查询</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="username">操作用户</label>
                                <input type="text" class="form-control" id="username" name="username" placeholder="输入用户名">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="page">页码</label>
                                <input type="number" class="form-control" id="page" name="page" value="1" min="1">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="limit">每页条数</label>
                                <input type="number" class="form-control" id="limit" name="limit" value="10" min="1" max="100">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>&nbsp;</label>
                                <div>
                                    <button type="button" class="btn btn-primary" onclick="queryEntityLogs()">查询</button>
                                    <button type="button" class="btn btn-secondary" onclick="resetForm()">重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h5>查询结果</h5>
            </div>
            <div class="card-body">
                <pre id="result" style="background-color: #f8f9fa; padding: 15px; border-radius: 5px; max-height: 500px; overflow-y: auto;">
// 点击查询按钮查看结果
                </pre>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script>
        // 查询实体日志
        function queryEntityLogs() {
            const formData = $('#queryForm').serialize();
            
            $.get('/sys/entityChangeLog/list?' + formData)
                .done(function(data) {
                    $('#result').text(JSON.stringify(data, null, 2));
                })
                .fail(function(xhr) {
                    $('#result').text('请求失败: ' + xhr.responseText);
                });
        }
        
        // 重置表单
        function resetForm() {
            $('#queryForm')[0].reset();
            $('#page').val(1);
            $('#limit').val(10);
        }
        
        // 页面加载完成后查询一次
        $(document).ready(function() {
            queryEntityLogs();
        });
    </script>
</body>
</html>